<template>
    <div>
        <div class="page-title">
            <el-breadcrumb  separator="/">
                <el-breadcrumb-item><i class="el-icon-location-outline"></i>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>系统角色</el-breadcrumb-item>
            </el-breadcrumb>
            <div><i class="el-icon-help"></i></div>
        </div>
        <div class="sub-block">
            <div class="main-opt-btn-group">
                <el-button  type="info" size="mini" plain @click="createNewUser">新建系统角色</el-button>
            </div>
            <div class="query-form-container">
                <el-form ref="queryForm"  class="query-form" size="mini" label-suffix="：" v-model="query" :inline="true" >
                    <el-form-item  prop="name">
                        <el-input placeholder="角色名称" v-model="query.name"></el-input>   
                    </el-form-item>
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="添加开始日期" v-model="query.date1" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                        <el-form-item prop="date2">
                            <el-date-picker type="date" placeholder="添加结束日期" v-model="query.date2" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini"  icon="el-icon-search"></el-button>
                        <el-button size="mini" icon="el-icon-refresh-left"></el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent,reactive } from 'vue'

export default defineComponent({
    setup () {
        let query = reactive({
            name:'',
            role:'',
            account: '',
            data1:'',
            data2:''
        })

        return {
            query
        }
    }
})
</script>

<style scoped>

</style>